<template>
  <div :class="fullScreenStatus ? 'map-wrap-full' : 'map-wrap'" :style="'width:' + mapWidth + '; height:' + mapHeight">
    <div id="eden-map" :class="fullScreenStatus ? 'map-full' : ''"></div>
  </div>
</template>
<script>
import AMap from 'AMap'
export default {
  components: {
  },
  data() {
    return {
      map: '',
      fullScreenStatus: false,
      MarkerClustererMarker: '',
      vMarkerClustererMarkers: [],
      vMarkerClustererStatus: true,
      mapAddress: '',
      mapDetail: '',
      marker: '',
      canDraw: true
    }
  },
  watch: {
    // address(value) {
    //   this.mapDetail = value
    // }
  },
  props: ['mapWidth', 'mapHeight', 'options', 'address'],
  created() {
    // 异步不及时
    this.mapDetail = this.address
    setTimeout(() => {
      this.mapInit()
    }, 500)
  },
  mounted() {
  },
  methods: {
    mapInit() {
      const _this = this
      // 基本地图加载
      this.map = new AMap.Map("eden-map", {
        resizeEnable: true,
        zoom: 13 // 地图显示的缩放级别
      })
      this.map.on('click', e => {
        this.canDraw = false
        // if (!this.address) {
        //   this.$message({
        //     message: '请填写地址',
        //     type: 'warning'
        //   })
        //   return false
        // }
        var lnglat = [e.lnglat.lng, e.lnglat.lat]
        var _this = this
        _this.$emit('updateMapLnglat', lnglat)
        console.log('lan', lnglat)
        // this.marker.setPosition(lnglat)
        // var geocoder = new AMap.Geocoder()
        // geocoder.getAddress(lnglat, function(status, result) {
        //   console.log("status",status)
        //   console.log("result",result)
        //   if (status === 'complete' && result.regeocode) {
        //     var address = result.regeocode.formattedAddress;
        //     console.log('我需要获取具体名称', address)
        //     _this.$emit('updateMapLnglat', lnglat)
        //     _this.$emit('updateMapMsg', address)
        //   } else {
        //     console.log('根据地址查询位置失败222')
        //   }
        // })
      })
      _this.marker = new AMap.Marker()
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geocoder'], function() {
        _this.map.addControl(new AMap.ToolBar())
        _this.map.addControl(new AMap.Scale())
      })
      // 编辑时 会点 应该不需要
      // if (this.mapDetail) {
      //   this.drawPoint()
      // }
    },
    drawPoint(address) {
      console.log('ddddddd')
      var _this = this
      var geocoder = new AMap.Geocoder()
      geocoder.getLocation(address, function(status, result) {
        if (status === 'complete' && result.geocodes.length) {
          var lnglat = result.geocodes[0].location
          console.log('lanxxx', lnglat)
          _this.marker.setPosition(lnglat)
          _this.map.add(_this.marker)
          _this.map.setFitView(_this.marker)
          _this.$emit('updateMapLnglat', lnglat)
        } else {
          console.log('根据地址查询位置失败111')
        }
      })
    },
    fullScreen() {
      this.fullScreenStatus = !this.fullScreenStatus
    },
    changeShowMarker() {
      this.vMarkerClustererStatus = !this.vMarkerClustererStatus
      const edenMap = document.getElementById('eden-map')
      const markers = edenMap.getElementsByClassName('amap-markers')[0]
      if (this.vMarkerClustererStatus) {
        markers.style.display = 'block'
        const _this = this
        _this.MarkerClustererMarker = new AMap.MarkerClusterer(_this.map, _this.vMarkerClustererMarkers, { gridSize: 80 })
      } else {
        markers.style.display = 'none'
        this.MarkerClustererMarker.clearMarkers()
      }
    }
  }
}
</script>
<style scoped>
  .map-wrap {
    width: 100%;
    height: 200px;
    position: relative;
    z-index: 2020;
  }
  .map-wrap-full {
    position: fixed;
    width: 100% !important;
    height: 100% !important;
    z-index: 2020;
    top: 0;
    left: 0;
  }
  .map-full {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .map-wrap #eden-map {
    width: 100%;
    height: 100%;
  }
  .map-operator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 200px;
    height: 85px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .map-operator > div {
    position: relative;
    width: 52px;
    height: 52px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px;
    cursor: pointer;
  }
  .map-operator .drawing {
    background-image: url('icon/draw.png');
    color: #fe6579;
  }
  .map-operator .submit {
    background-image: url('icon/submit.png');
    color: #a9ea0a;
  }
  .map-operator .clear {
    background-image: url('icon/clear.png');
    color: #b8c5cd;
  }
  .map-operator > div > div {
    position: absolute;
    width: 52px;
    height: 22px;
    line-height: 22px;
    left: 0;
    bottom: -22px;
    font-size: 14px;
  }
</style>
